<template>
    <!-- 创建一个可以切换路由的图标 -->
     <!-- :to="path" 指定路由地址 路径是父组件传过来的 -->
    <router-link :to="path" class="tab-icon">
        <!-- 创建一个i 标签 -->
        <i class="icon">
            <!-- 这里引用的 iconText 是父组件传过来的 -->
            {{ iconText }}
        </i>
        <p class="text">
            <!-- 下面是插槽，在父组件中定义 -->
            <slot></slot>
        </p>
    </router-link>
</template>

<script>
export default {
    // 使用props 接收父组件传过来的数据
    props: {
        iconText: String,  // 图标名称 取值为字符串 必传
        path: String  // 路径 取值为字符串 必传
    },
}
</script>

<style lang="less" scoped>
    .tab-icon {
        // 文字大小
        font-size: 0.12rem;
        .icon {
            // 设置为弹性盒子
            display: flex;
            // 水平居中
            justify-content: center;
            // 垂直居中
            align-items: center;
            // 宽高背景
            width: 0.25rem;
            height: 0.25rem;
            background: #ddd;
            border-radius: 50%;
            // 文字颜色
            color: #999;
            // 过渡动画
            transition: all 0.5s;
        }
        .text {
            // 文字左右居中
            text-align: center;
            // 上间距
            margin-top: 0.02rem;            
            // 颜色
            color: #999;
            // 过渡动画
            transition: all 0.5s;
        }
        // 当前激活的路由 默认的 样式
        &.router-link-active {
            .icon {
                // 颜色
                color: #fff;
                // 背景颜色
                background-color: #ed4040;
            }
            .text {
                // 颜色
                color: #ed4040;
            }
        }
    }
</style>